<template>
	<view class="">
		<view class="get-top">
			<image src="../../static/images/logo_03.jpg" class="logo"></image>
			<image :src="resData.my_qrcode" class="qr-image"></image>
			<view class="qr-p">关注我们 更多优惠</view>
		</view>

		<form @submit="SubmitFormData">
			<view class="get">
				<view class="title">
					<view class="title-bar"></view>
					<view class="title-h">获取报价</view>
					<view class="title-p">Get a quote</view>
				</view>
				<view class="get-in">
					<view class="get-in-p"><text class="red">*</text>姓名</view>
					<input class="get-txt" name="nickname" v-model="resData.uinfo.nickname"></input>
				</view>
				<view class="get-in">
					<view class="get-in-p"><text class="red">*</text>电话</view>
					<input class="get-txt" name="tel" v-model="user_tel"></input>
					<!-- <view class="get-tips" @click="login">获取微信手机号</view> -->
					<button class="get-tips" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">获取微信手机号</button>
				</view>
				<view class="get-in">
					<view class="get-in-p"><text class="red">*</text>风格</view>
					<picker mode="selector" @change="bindPickerChange" :value="index" :range="resData.category_list">
						<view class="get-bar">
							<view class="get-h">{{resData.category_list[index]}}</view>
							<image src="../../static/images/da.png" class="da"></image>
						</view>
						<input type="text" name="cat_id" v-model="index" style="display: none;" />
					</picker>
				</view>
				<button form-type="submit" class="get-btn">立即获取报价</button>
			</view>
		</form>
		<page-foot :indexNum="indexNum"></page-foot>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				indexNum: 3,
				index: 0,
				resData: [],
				user_tel: ''
			}
		},

		/**
		 * 生命周期函数--点击事件集合
		 */
		methods: {
			bindPickerChange(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.index = e.target.value
			},

			SubmitFormData(e) {
				var name = e.detail.value.nickname
				var tel = e.detail.value.tel
				var categoryName = this.resData.category_list[e.detail.value.cat_id]

				var post_data = {
					name: name,
					tel: tel,
					style: categoryName
				}

				this.$http({
					url: 'Api/offer/get_offer_info',
					data: post_data,
					hideLoading: false,
					success: res => {
						if (res.code == 1) {
							uni.showToast({
								title: res.msg,
								duration: 5000,
								mask: true,
							});
						}
					}
				})

				console.log(categoryName)
			},

			login() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},

			getPhoneNumber(e) {
				var that = this
				uni.checkSession({
					success() {
						console.log('session_key未过期')
						if(e.detail.errMsg == 'getPhoneNumber:ok'){	
							var post_data = {
								encrypteddata: e.detail.encryptedData,
								iv: e.detail.iv,
								sessionkey: uni.getStorageSync('session_key'),
								user_id: uni.getStorageSync('user_id')
							}
							
							that.$http({
								url: 'Api/Login/get_wechat_utell',
								data: post_data,
								hideLoading: false,
								success: res => {
									if(res.code == 1){
										that.user_tel = res.data.tel
									}
								}
							})
						}
					},
					fail() {
						console.log('session_key已过期')
						uni.showModal({
							title: '提示',
							content: '您的授权信息已过期，请重新授权！',
							showCancel: false,
							confirmText: '马上授权',
							success: res => {
								if (res.confirm) {
									uni.navigateTo({
									    url: '/pages/login/login?returnUrl=/pages/offer/index'
									});
								}
							}
						})
					}
				})
			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			this.$http({
				url: 'Api/offer/index',
				data: '',
				// method: 'post',
				hideLoading: false,
				success: res => {
					this.resData = res.data
					this.user_tel = res.data.uinfo.tel
				},
			})
		},

		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady() {

		},

		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh() {

		},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom() {

		},
	}
</script>

<style>
	.get-top {
		padding: 40rpx 0;
		box-shadow: 0 -10rpx 10rpx rgba(0, 0, 0, .1) inset;
		text-align: center;
	}

	.logo {
		display: block;
		width: 257rpx;
		height: 118rpx;
		margin: 0 auto;
		margin-bottom: 25rpx;
	}

	.qr-image {
		width: 165rpx;
		height: 165rpx;
	}

	.qr-p {
		font-size: 22rpx;
		color: #4c4c4c;
	}

	.get {
		padding: 50rpx 100rpx;
	}

	.title {
		margin-bottom: 30rpx;
		text-align: center;
	}

	.title-bar {
		width: 87rpx;
		height: 10rpx;
		margin: 0 auto 10rpx;
		background-color: #000;
	}

	.title-h {
		font-size: 32rpx;
		font-weight: bold;
	}

	.title-p {
		font-size: 20rpx;
		color: #999;
	}

	.get-in {
		margin-bottom: 30rpx;
		text-align: center;
	}

	.get-in-p {
		margin-bottom: 10rpx;
		font-size: 14px;
		color: #666;
	}

	.get-txt {
		width: 100%;
		height: 80rpx;
		border-radius: 50rpx;
		background-color: #f2f2f2;
		text-align: center;
		font-size: 34rpx;
	}

	.get-tips {
		padding-top: 20rpx;
		font-size: 24rpx;
		color: #f00;
		text-decoration: underline;
		background-color: #FFFFFF;
	}

	button {
		border: none;
	}

	button::after {
		border: none;
	}

	.get-bar {
		width: 100%;
		height: 80rpx;
		border-radius: 50rpx;
		background-color: #f2f2f2;
		line-height: 80rpx;
		text-align: center;
		font-size: 34rpx;
		position: relative;
	}

	.da {
		width: 24rpx;
		height: 14rpx;
		position: absolute;
		top: 35rpx;
		right: 30rpx;
	}

	.get-btn {
		width: 100%;
		height: 85rpx;
		margin-top: 60rpx;
		border-radius: 50rpx;
		background-color: #f7d031;
		box-shadow: 0 10rpx 10rpx rgba(247, 208, 49, .5);
		text-align: center;
		line-height: 85rpx;
		font-size: 32rpx;
	}
</style>
